<template>
  <a-tabs @change="change">
    <a-tab-pane key="1" tab="基础信息">
      <a-form ref="formRef" :model="form" :rules="rules" v-bind="formItemLayout">
        <a-form-item label="工位代码:" name="stationCode">
          <a-input v-model:value="form.stationCode" :disabled="isUpdate" allow-clear placeholder="请输入工位代码" style="width: 100%" />
        </a-form-item>
        <a-form-item label="工位名称:" name="stationName">
          <a-input v-model:value="form.stationName" allow-clear placeholder="请输入工位名称" />
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="人员配置">
      <a-transfer
        v-model:target-keys="originPeopleTargetKeys"
        :data-source="peopleMockData"
        :show-search="true"
        :rowKey="record => record.USER_ID"
        :filter-option="(inputValue, item) => item.USER_ID.indexOf(inputValue) !== -1 || item.REAL_NAME.indexOf(inputValue) !== -1"
        @change="onPeopleChange"
      >
        <template #children="{ direction, filteredItems, selectedKeys, disabled: listDisabled, onItemSelectAll, onItemSelect }">
          <a-table
            :row-selection="
              getPeopleRowSelection({
                disabled: listDisabled,
                selectedKeys,
                onItemSelectAll,
                onItemSelect
              })
            "
            :columns="direction === 'left' ? peopleLeftColumns : peopleRightColumns"
            :data-source="filteredItems"
            size="small"
            :style="{ pointerEvents: listDisabled ? 'none' : null }"
            :custom-row="
              ({ key, disabled: itemDisabled }) => ({
                onClick: () => {
                  if (itemDisabled || listDisabled) return;
                  onItemSelect(key, !selectedKeys.includes(key));
                }
              })
            "
          />
        </template>
      </a-transfer>
    </a-tab-pane>
    <a-tab-pane key="3" tab="设备配置">
      <a-transfer
        v-model:target-keys="originEqpTargetKeys"
        :data-source="eqpmockData"
        :show-search="true"
        :rowKey="record => record.eqpCode"
        :filter-option="(inputValue, item) => item.eqpCode.indexOf(inputValue) !== -1 || item.eqpname.indexOf(inputValue) !== -1"
        @change="onEqpChange"
      >
        <template #children="{ direction, filteredItems, selectedKeys, disabled: listDisabled, onItemSelectAll, onItemSelect }">
          <a-table
            :row-selection="
              getEqpRowSelection({
                disabled: listDisabled,
                selectedKeys,
                onItemSelectAll,
                onItemSelect
              })
            "
            :columns="direction === 'left' ? eqpLeftColumns : eqpRightColumns"
            :data-source="filteredItems"
            size="small"
            :style="{ pointerEvents: listDisabled ? 'none' : null }"
            :custom-row="
              ({ key, disabled: itemDisabled }) => ({
                onClick: () => {
                  if (itemDisabled || listDisabled) return;
                  onItemSelect(key, !selectedKeys.includes(key));
                }
              })
            "
          />
        </template>
      </a-transfer>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup name="OrgForm">
import { reactive, ref } from 'vue';
import {StationApi} from '../api/StationApi';
const props = defineProps({
  // 表单数据
  form: Object,
  // 是否是编辑
  isUpdate: false
});
// 人员穿梭框模拟数据(等待有接口后修改)
const peopleMockData = [];

// 设备穿梭框模拟数据(等待有接口后修改)
const eqpmockData = [];

// 模拟返显数据
const originPeopleTargetKeys =ref([]
);
const originEqpTargetKeys = ref([]
);
const init = (value) => {
  StationApi.config({orgid:value}).then(res => {
    if (res.success) {
      res.data.userlist.forEach(item=> peopleMockData.push(item));
      res.data.equipmentList.forEach(item=> eqpmockData.push(item));

    }
    originPeopleTargetKeys.value=props.form.userids;
    originEqpTargetKeys.value=props.form.eqpids;
  })
};
// 穿梭框表格列定义
const peopleLeftTableColumns = [
  {
    dataIndex: 'ACCOUNT',
    title: '工号'
  },
  {
    dataIndex: 'REAL_NAME',
    title: '姓名'
  }
];
const peopleRightTableColumns = [
  {
    dataIndex: 'ACCOUNT',
    title: '工号'
  },
  {
    dataIndex: 'REAL_NAME',
    title: '姓名'
  }
];
const eqpLeftTableColumns = [
  {
    dataIndex: 'eqpCode',
    title: '设备代码'
  },
  {
    dataIndex: 'eqpname',
    title: '设备名称'
  }
];
const eqprRightTableColumns = [
  {
    dataIndex: 'eqpCode',
    title: '设备代码'
  },
  {
    dataIndex: 'eqpname',
    title: '设备名称'
  }
];
const peopleLeftColumns = ref(peopleLeftTableColumns);
const peopleRightColumns = ref(peopleRightTableColumns);
const eqpLeftColumns = ref(eqpLeftTableColumns);
const eqpRightColumns = ref(eqprRightTableColumns);


const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 }
};
// 验证规则
const rules = reactive({
  stationName: [{ required: true, message: '请输入工位代码', type: 'string', trigger: 'blur' }],
  stationCode: [{ required: true, message: '请输入工位名称', type: 'string', trigger: 'blur' }]
});

// 改变穿梭框数据时
const onPeopleChange = nextTargetKeys => {
  props.form.userids=nextTargetKeys
};
const onEqpChange = nextTargetKeys => {
  props.form.eqpids=nextTargetKeys
};

// 表格通用方法
const getPeopleRowSelection = ({ disabled, selectedKeys, onItemSelectAll, onItemSelect }) => {
  return {
    getCheckboxProps: item => ({
      disabled: disabled || item.disabled
    }),
    onSelectAll(selected, selectedRows) {
      const treeSelectedKeys = selectedRows.filter(item => !item.disabled).map(({ key }) => key);
      onItemSelectAll(treeSelectedKeys, selected);
    },
    onSelect({ key }, selected) {
      onItemSelect(key, selected);
    },
    selectedRowKeys: selectedKeys
  };
};
const getEqpRowSelection = ({ disabled, selectedKeys, onItemSelectAll, onItemSelect }) => {
  return {
    getCheckboxProps: item => ({
      disabled: disabled || item.disabled
    }),
    onSelectAll(selected, selectedRows) {
      const treeSelectedKeys = selectedRows.filter(item => !item.disabled).map(({ key }) => key);
      onItemSelectAll(treeSelectedKeys, selected);
    },
    onSelect({ key }, selected) {
      onItemSelect(key, selected);
    },
    selectedRowKeys: selectedKeys
  };
};
defineExpose({init})
</script>

<style scoped lang="less"></style>
